<template lang="html">
  <div class="selfBox" @click="hide">
    <el-row>
      <el-col :span="2" class="text-right headLable">
        <span>产品名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.productName	" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>售卖渠道：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="form.channel" size="small" placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>商家名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.businessmenName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="2" class="text-right headLable">
        <span>是否预约：</span>
      </el-col>
      <el-col :span="4" class="text-left" style="padding-top:4px;">
        <el-checkbox v-model="form.isPreAgreed" class="check">需预约</el-checkbox>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>产品类型：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="form.productType" size="small" placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="4" class="text-left" style="padding-top:4px; margin-left:80px;">
        <el-button size="small" type="success">保存</el-button>
      </el-col>

    </el-row>


    <el-row class="box">
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane label="出售中" name="first">
          <ul class="listBox">
              <li class="first">
                <span class="name">产品名</span>
                <span class="num">库存</span>
                <span class="allNum green">总销量</span>
                <span class="shangjia">商家名</span>
                <span class="hotel">产品类型</span>
                <span class="policy">退款政策</span>
                <span class="buy">提前购买</span>
                <span class="update green">更新时间</span>
                <span class="operation">操作</span>
              </li>
              <li v-for="(item,index) in $store.state.TanProduct.selfList">
                <span class="name">
                  <p>{{item.name}}</p>
                  <span class="price">¥{{item.price}}</span>
                </span>
                <span class="num text-left">{{item.reserve}}</span>
                <span class="allNum text-left green">{{item.soldCount}}</span>
                <span class="shangjia text-left">{{item.businessmenName}}</span>
                <span class="hotel">{{item.selfSell.type}}</span>
                <span class="policy text-left">{{item.refundPolicy.name}}</span>
                <span class="buy text-left">{{item.preTime==0?'不是':'是'}}</span>
                <span class="update">
                  <p>{{item.updateTime.substring(0,10)}}</p>
                  <p>{{item.updateTime.substring(11,19)}}</p>
                </span>
                <span class="operation green">
                  <p>
                    <img class="icon" @click.stop="codeShow(index)" src="static/img/icon1/menu_2vm.png">
                    <img style="margin-left:10px;" @click.stop="copyShow(index)" class="icon" src="static/img/icon1/menu_href.png">
                    <span class="record" @click="changeDialog(5)">预约记录</span>
                  </p>
                  <p>
                    <span class="text-icon" @click="changeDialog(1)">预约</span>
                  </p>
                  <!--复制框-->
                  <div class="copyBox" v-show="copyType==index" @click.stop="">
                    <el-input  size="small" v-model="input4" class="copyText1" :data-clipboard-text="input4">
                      <el-button slot="append" @click="copy(index)">复制</el-button>
                    </el-input>
                  </div>
                  <div class="arrow" v-show="copyType==index" @click.stop=""></div>
                  <!--二维码框-->
                  <div class="codeBox" v-show="codeType==index" @click.stop="">
                    <canvas class="canvas1"></canvas>
                  </div>
                  <div class="arrow2" v-show="codeType==index" @click.stop=""></div>
                </span>
              </li>
          </ul>
         </el-tab-pane>
       </el-tabs>
    </el-row>
    <el-row class="text-right" style="margin-top:10px;">
      共{{this.$store.state.TanProduct.total}}条
      <span style="display:inline-block; min-width:100px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :page-count="$store.state.TanGoods.pages">
        </el-pagination>
      </span>
    </el-row>
  </div>
</template>

<script>
import "./clipboard.min.js"   //复制插件
import QRCode from 'qrcode'

export default {
  data(){
    return {
      form:{
        productName:'',
        channel:'',
        businessmenName:'',
        isPreAgreed:'',
        productType:''
      },
      options: [{
         value: '选项1',
         label: '黄金糕'
       }, {
         value: '选项2',
         label: '双皮奶'
       }, {
         value: '选项3',
         label: '蚵仔煎'
       }, {
         value: '选项4',
         label: '龙须面'
       }, {
         value: '选项5',
         label: '北京烤鸭'
       }],
      input4:'www.abc123.com',
      copyType:-1,
      codeType:-1,
      checked:false,
      activeName: 'first',
      page:1
    }
  },
  methods:{
    handleClick:()=>{

    },
    handleCurrentChange:function (){
      console.log(this.page);
    },
    changeDialog:function (type,id){
      var json1={
        'type':type,
        'name':'TanProduct',
        'id':id,
        'title':'订单详情'
      }
      this.$store.dispatch('changeDialog',json1);
    },
    copy:function (n){
      var that = this;
      if(that.activeName=='first'){
        var a=document.getElementsByClassName('copyText1')
      }else if(that.activeName=='second'){
        var a=document.getElementsByClassName('copyText2')
      }
      var clipboard = new Clipboard(a[n]);//实例化
      clipboard.on('success', function(e) {
        that.$message({
          message: '复制成功',
          type: 'success',
          duration:800
        });
      });
    },
    copyShow:function (n){
      console.log(n);
      this.codeType=-1;
      this.copyType=n;
    },
    hide:function (){
      this.copyType=-1;
      this.codeType=-1;
    },
    codeShow:function (n){
      console.log(n);
      this.copyType=-1;
      this.codeType=n;
      this.useqrcode(n);
    },
    useqrcode(n){
      if(this.activeName=='first'){
        var canvas = document.getElementsByClassName('canvas1');
      }else if(this.activeName=='second'){
        var canvas = document.getElementsByClassName('canvas2');
      }
      QRCode.toCanvas(canvas[n], 'http://www.baidu.com', function (error) {
      if (error) console.error(error)
      console.log('success!');
      })
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanProduct');
      var json1={
        businessmenName:this.form.businessmenName,
        channel:this.form.channel,
        isPreAgreed:this.form.isPreAgreed,
        otaPlatformName:'',
        pageCount:5,
        pageIndex:this.page,
        productName:this.form.productName,
        type:5,
        typeName:''
      };
      this.$store.dispatch('getProductScenicSpotList',json1);
    }
  },
  created(){
    this.getList();
  }
}
</script>

<style lang="Sass">
  .selfBox{
    .el-tabs__header{margin: 0;}
  }
</style>
<style lang="Sass" scoped>
  .selfBox{ margin: 20px 10px; background: #fff; padding: 20px 10px; box-sizing: border-box; border-radius: 10px;

    .headLable{width: 80px;}
    span{font-size: 12px; height: 30px; line-height: 30px;}
    .text-right{text-align: right;}
    .text-left{text-align: left;}
    .el-checkbox__inner{width: 15px; height: 15px; margin-top: 7px;}
    .el-checkbox__inner::after{ left: 4px; top:0px;}
    .btn{padding: 0 20px;}
    .box{width:100%; margin: 10px auto 0 auto;}
  }
  .listBox{width: 100%; background: #fff; margin: 20px 0;

    .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0px 5px; margin-bottom: 10px;

        span{display: inline-block; line-height: 30px;}
        .name{flex: 1;}
        .num{flex: 0 0 80px;}
        .allNum{flex: 0 0 80px;}
        .shangjia{flex: 0 0 120px;}
        .hotel{flex: 0 0 120px;}
        .policy{flex: 0 0 100px;}
        .buy{flex: 0 0 80px;}
        .update{flex: 0 0 90px; }
        .operation{flex: 0 0 150px;}
    }
    li{display: flex; height: auto; text-align: left; padding: 5px 5px; min-height: 50px;

      span{display: inline-block; box-sizing: border-box;  line-height: 13px;}
      p{font-size: 12px;}
      .name{flex: 1; height: auto;

        p{width: 90%; height: auto; line-height: 16px; }
        .price{color: red; margin-top: 5px; height: auto;}
      }
      .num{flex: 0 0 80px;}
      .allNum{flex: 0 0 80px;}
      .shangjia{flex: 0 0 120px;}
      .hotel{flex: 0 0 120px;}
      .policy{flex: 0 0 100px;}
      .buy{flex: 0 0 80px;}
      .update{flex: 0 0 90px;

        p{margin: 0; height: 18px;}
      }
      .operation{flex: 0 0 150px; position: relative;
        .copyBox{ position: absolute; padding: 5px 10px; left: -300px; top: -13px; border: 1px solid #eee; z-index: 9; width: 300px; height: 30px; background: #fff; border-radius: 4px;}
        .codeBox{ position: absolute; left: -130px; top: -50px; width: 120px; height: 120px; border: 1px solid #eee; z-index: 9;  background: #fff; border-radius: 4px;}
        .arrow{position: absolute; left:17px; top:0px; background: #fff; border-right: 1px solid #eee; border-top: 1px solid #eee; z-index: 10; transform: rotate(45deg);width: 8px; height: 8px; }
        .arrow2{position: absolute; left:-12px; top:2px; background: #fff; border-right: 1px solid #eee; border-top: 1px solid #eee; z-index: 10; transform: rotate(45deg);width: 8px; height: 8px; }
        .record{display: inline-block; vertical-align: top; margin-top: 2px; margin-left: 10px;}
        .text-icon{margin-top: -5px;}
        img{cursor: pointer;}
      }
      .icon-red{color: #DE013C; border:1px solid #DE013C; height: auto; font-size: 12px; padding: 4px 5px 2px 5px; border-radius: 4px;}
    }
    li:nth-of-type(odd){ background: #FAFAFC; }
    li:first-child{ background: #fff;}

  }
  .canvas{width: 120px !important; height: 120px !important;}
</style>
